<script setup>
import { ref, onMounted, watch, computed } from 'vue';
import { Search, ArrowDown, Upload, Bell, User } from '@element-plus/icons-vue';
import { useRouter, useRoute } from 'vue-router';
import { useUserStore } from '../stores/user';
import { ElMessage } from 'element-plus';
import { logout } from '@/api/user';

const router = useRouter();
const route = useRoute();
const userStore = useUserStore();

// 当前激活的菜单
const activeMenu = ref('首页');

// 根据当前路由路径更新激活的菜单
const updateActiveMenu = () => {
  const path = route.path;
  if (path.includes('/community')) {
    activeMenu.value = '社区';
  } else if (path.includes('/learning')) {
    activeMenu.value = '课程';
  } else if (path === '/' || path === '/test') {
    activeMenu.value = '首页';
  } else if (path.includes('/ai')) {
    activeMenu.value = 'AI助手';
  } else if (path.includes('/course')) {
    activeMenu.value = 'AI助手';
  }
};

// 监听路由变化，更新激活菜单
watch(() => route.path, () => {
  updateActiveMenu();
});

// 组件挂载时，初始化激活菜单
onMounted(() => {
  updateActiveMenu();
});

// 显示搜索框
const showSearch = ref(false);
const toggleSearch = () => {
  showSearch.value = !showSearch.value;
};

// 显示导航更多菜单
const showMoreMenu = ref(false);
const toggleMoreMenu = () => {
  showMoreMenu.value = !showMoreMenu.value;
};

// 显示上传菜单
const showUploadMenu = ref(false);
const toggleUploadMenu = () => {
  showUploadMenu.value = !showUploadMenu.value;
};

// 显示用户菜单
const showUserMenu = ref(false);
const toggleUserMenu = () => {
  showUserMenu.value = !showUserMenu.value;
};

const isLogin = computed(() => !!localStorage.getItem('token'));

// 跳转到登录页面
const goToLogin = () => {
  router.push('/login');
};

// 跳转到个人中心
const goToProfile = () => {
  router.push('/profile');
};

// 跳转到我的文章
const goToMyArticles = () => {
  router.push('/my-articles');
};

// 跳转到我的收藏
const goToMyCollect = () => {
  router.push('/my-collect');
};

// 判断是否为老师或管理员
const userInfo = computed(() => userStore.userInfo || JSON.parse(localStorage.getItem('userInfo') || '{}'));
const isManager = computed(() => {
  const roles = userInfo.value.roles || []
  return roles.some(role => ['teacher', 'admin', '管理员', '老师'].includes(role.toLowerCase()))
})
const goToAdmin = () => router.push('/teacher')

// 处理登出
const handleLogout = async () => {
  try {
    await logout();
  } catch (e) {}
  localStorage.removeItem('token');
  localStorage.removeItem('userInfo');
  router.replace('/login');
};

// 处理导航点击
const handleNavClick = (item) => {
  activeMenu.value = item;
  console.log(`点击了导航项: ${item}`);
  if (item === '社区') {
    console.log('准备跳转到社区页面');
    router.push('/community');
    console.log('跳转指令已发送');
  } else if (item === '首页') {
    router.push('/');
  } else if (item === '课程') {
    router.push('/learning');
  } else if (item === 'AI助手') {
    router.push('/ai');
  }
  // 其他导航项可以根据需要添加相应的路由
};
</script>

<template>
  <!-- 顶部导航 -->
  <header class="header">
    <div class="nav-container">
      <!-- 左侧导航 -->
      <div class="nav-left">
        <!-- Logo -->
        <div class="logo">
          <el-image 
            style="width: 48px; height: 48px; border-radius: 12px;"
            src="/images/tubiao.jpg" 
            fit="cover"
          ></el-image>
        </div>
        
        <!-- 主导航 -->
        <ul class="main-nav">
          <li 
            v-for="item in ['首页', '社区', '课程']" 
            :key="item"
            :class="{ active: activeMenu === item }"
            @click="handleNavClick(item)"
          >
            {{ item }}
          </li>
          
          <!-- 更多菜单 -->
          <li class="more-menu" @click="toggleMoreMenu">
            <span>更多 <el-icon><arrow-down /></el-icon></span>
            <div class="dropdown-menu" v-show="showMoreMenu">
              <ul>
                <li v-for="item in ['榜单', '话题', '灵感', '字库', '工具']" :key="item">{{ item }}</li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
      
      <!-- 右侧导航 -->
      <div class="nav-right">
        <!-- 搜索按钮 -->
        <div class="search-btn" @click="toggleSearch">
          <el-button circle><el-icon><search /></el-icon></el-button>
          
          <!-- 搜索框 -->
          <div class="search-dropdown" v-show="showSearch">
            <el-input placeholder="搜索...">
              <template #prefix>
                <el-icon><search /></el-icon>
              </template>
              <template #append>
                <el-dropdown>
                  <span>作品 <el-icon><arrow-down /></el-icon></span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item v-for="item in ['作品', '文章', '源文件', '设计师', '灵感', '话题', '活动', '素材']" :key="item">{{ item }}</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </template>
            </el-input>
          </div>
        </div>
        
        <!-- 上传按钮 -->
        <div class="upload-btn" v-if="userStore.isLoggedIn" @click="toggleUploadMenu">
          <el-button type="primary">上传 <el-icon><upload /></el-icon></el-button>
          
          <!-- 上传菜单 -->
          <div class="upload-dropdown" v-show="showUploadMenu">
            <ul>
              <li>上传作品</li>
              <li>上传经验</li>
            </ul>
          </div>
        </div>
        
        <!-- 消息通知 -->
        <el-button circle><el-icon><bell /></el-icon></el-button>
        
        <!-- 用户信息 -->
        <template v-if="userStore.isLoggedIn">
          <div class="user-menu" @click="toggleUserMenu">
            <el-avatar :size="32" :src="userStore.userInfo.avatar">
              <el-icon><user /></el-icon>
            </el-avatar>
            <span class="username">{{ userStore.userInfo.username }}</span>
            <el-icon><arrow-down /></el-icon>
            
            <div v-if="showUserMenu" class="user-dropdown">
              <ul>
                <li @click="goToProfile">个人中心</li>
                <li @click="goToMyCollect">我的收藏</li>
                <li @click="goToMyArticles">我的文章</li>
                <li v-if="isManager" @click="goToAdmin">管理界面</li>
                <li class="logout" @click="handleLogout">退出登录</li>
              </ul>
            </div>
          </div>
        </template>
        <template v-else>
          <el-button type="primary" @click="goToLogin">登录</el-button>
        </template>
      </div>
    </div>
  </header>
</template>

<style scoped>
/* 导航样式 */
.header {
  width: 100%;
  height: 64px;
  background: linear-gradient(90deg, #f8fbff 0%, #eaf3fa 100%);
  box-shadow: 0 2px 12px 0 rgba(64,158,255,0.08);
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1.5px solid #e6eaf0;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 32px;
}

.nav-left,
.nav-right {
  display: flex;
  align-items: center;
}

.logo {
  margin-right: 28px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(64,158,255,0.08);
}

.main-nav {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 8px;
}

.main-nav li {
  padding: 0 18px;
  font-size: 17px;
  cursor: pointer;
  position: relative;
  line-height: 64px;
  border-radius: 8px;
  transition: background 0.2s, color 0.2s;
}

.main-nav li.active {
  color: #fff;
  background: linear-gradient(90deg, #409eff 60%, #66b1ff 100%);
  box-shadow: 0 2px 8px rgba(64,158,255,0.10);
}

.main-nav li:hover {
  background: #eaf3fa;
  color: #409eff;
}

.more-menu {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 60px;
  left: 0;
  width: 140px;
  background-color: #fff;
  box-shadow: 0 4px 16px 0 rgba(64,158,255,0.10);
  border-radius: 8px;
  padding: 10px 0;
  z-index: 10;
}

.dropdown-menu li {
  padding: 10px 20px;
  border-radius: 6px;
  transition: background 0.2s;
}

.dropdown-menu li:hover {
  background-color: #f0f7ff;
}

.nav-right {
  display: flex;
  align-items: center;
}

.nav-right > * {
  margin-left: 18px;
}

.el-button,
.el-button--primary {
  border-radius: 20px !important;
  font-size: 15px;
}

.search-btn,
.upload-btn,
.user-menu {
  position: relative;
}

.search-dropdown,
.upload-dropdown,
.user-dropdown {
  position: absolute;
  top: 50px;
  right: 0;
  min-width: 200px;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 10px;
  z-index: 10;
}

.upload-dropdown ul,
.user-dropdown ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.upload-dropdown li,
.user-dropdown li {
  padding: 8px 16px;
  cursor: pointer;
}

.upload-dropdown li:hover,
.user-dropdown li:hover {
  background-color: #f5f7fa;
}

.user-menu {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 20px;
  padding: 4px 10px 4px 4px;
  transition: background 0.2s;
}

.user-menu:hover {
  background: #f0f7ff;
}

.username {
  font-size: 15px;
  color: #409eff;
  font-weight: 500;
}

.user-dropdown {
  position: absolute;
  top: 48px;
  right: 0;
  min-width: 180px;
  background: #fff;
  box-shadow: 0 4px 16px 0 rgba(64,158,255,0.10);
  border-radius: 10px;
  z-index: 100;
  padding: 10px 0;
}

.user-dropdown ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.user-dropdown li {
  padding: 12px 24px;
  cursor: pointer;
  font-size: 16px;
  color: #333;
  border-radius: 6px;
  transition: background 0.2s;
}

.user-dropdown li.logout {
  border-top: 1px solid #ebeef5;
  color: #f56c6c;
}

.user-dropdown li.logout:hover {
  background: #fef0f0;
}

.user-dropdown li:hover {
  background: #f0f7ff;
}
</style> 